<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ include file="/view/common/init.jsp"%>
<title>Thông tin về sóng thuê bao</title>
<script type="text/javascript">
	window.onload = function() {
		var rxChart = new JSChart('rxChart', 'line');
		rxChart.setAxisNameX('Ngày');
		rxChart.setAxisNameY('');
		rxChart.setTitle('');

		var rxQualityChart = new JSChart('rxQualityChart', 'line');
		rxQualityChart.setAxisNameX('Ngày');
		rxQualityChart.setAxisNameY('');
		rxQualityChart.setTitle('');

		<c:out escapeXml="false" value="${data}" />;
		rxChart.setLineColor('#A4D314', 'average');
		rxChart.setLineColor('#BBBBBB', 'max');		
		rxQualityChart.setLineColor('#A4D314', 'average');
		rxQualityChart.setLineColor('#BBBBBB', 'max');

		<c:out value="${toolTip}" escapeXml="false" />;
		
		rxChart.draw();
		rxQualityChart.draw();

	};	
</script>
<center>
<div class="header">THÔNG TIN THUÊ BAO</div>
<div style="width: 980px;">
<table class="tbl_info" border="0" width="613">
	<tbody>
		<tr>
			<td class="hed" colspan="2" />THÔNG TIN THUÊ BAO</td>
		</tr>
			<tr><td>Chủ thuê bao</td><td><c:out value="${agent.customerId}"/></td></tr>
			<tr><td>Số điện thoại</td><td><c:out value="${agent.msisdn}"/></td></tr>
	</tbody>
</table>
<div class="clear-both"><span></span></div>
<s:form action="detail.do" method="get" name="agentDetailForm" id="agentDetailForm">
<input type="hidden" name="agent.agentId" value="<c:out value="${agent.agentId}"/>" />
<div style="padding-top: 50px;text-align: center;width: 500px;">
	<div style="float: left;width: 60px;text-align: right;">Từ ngày</div>
	<div style="float: left;width: 130px;">
			<!-- calendar attaches to existing form element -->
			<input id="fromDate" style="width: 80px;"  type="text" name="fromDate" value="<c:out value="${fromDate}"/>" readonly="readonly"/>
			<script language="JavaScript">
				new tcal ({
					// form name
					'formname': 'agentDetailForm',
					// input name
					'controlname': 'fromDate'
				});	
			</script>
	</div>
	<div style="float: left;width: 60px;text-align: right;">Đến ngày</div>	
	<div style="float: left;width: 130px;">
			<!-- calendar attaches to existing form element -->
			<input id="toDate" style="width: 80px;" type="text" name="toDate" value="<c:out value="${toDate}"/>" readonly="readonly"/>
			<script language="JavaScript">
				new tcal ({
					// form name
					'formname': 'agentDetailForm',
					// input name
					'controlname': 'toDate'
				});	
			</script>
	</div>
	<div style="float: left;width: 100px;text-align: right;">
		<button id="bntChoose" type="button" 
			onclick="checkDateForDetailForm($('fromDate').value, $('toDate').value);">Chọn</button>
	</div>			
</div>
</s:form>
<div class="clear-both"><spans></spans></div>
<div style="width: 840px;margin-top: 80px;">
	<div class="left" style="width: 400px;">
		<div id="rxChart"></div>
		<div style="text-align: center;">Cường độ sóng</div>
	</div>
	<div class="right" style="width: 400px;">
		<div id="rxQualityChart"></div>
		<div style="text-align: center;">Chất lượng sóng</div>		
	</div>
</div>	
<div class="clear-both"><span></span></div>
<div style="margin-top: 30px;">
	<button type="button" 
		onclick="location.href='<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do';">Trở lại</button>
</div>
</div>
</center>